<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跳跳乐</title>
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        :root {
            --font-family-primary: "Fredoka One", sans-serif;
            --font-family-secondary: "Source Sans Pro", sans-serif;
            --font-family-monospace: "Source Code Pro", monospace;
            --color-text: #121212;
            --color-yellow: #fbe8a6;
            --color-yellow-alt: #e6c513;
            --color-yellow-tint: #cfb011;
            --color-red: #f76d6d;
            --color-red-tint: #f53d3d;
            --color-orange: #f4976c;
            --color-cyan: #a8d1e7;
            --color-white: #f5f5f5;
            --color-blue: #24315e;
        }

        #blocker {
            position: absolute;
            width: 100%;
            height: 100%;
            /* background: linear-gradient(57deg, #c004048f, #0000006b); */
            background: linear-gradient(57deg, #7f947fb0, #b7d2b8ba);
            color: #fffae5;
            font-size: 3vmin;
            letter-spacing: 0.5vmin;
        }

        p {
            padding: 1vmin;
            min-width: 200px;
            text-align: left;
        }

        p:first-child {
            font-size: 5vw;
            letter-spacing: 12px;
            background: linear-gradient(45deg, #4c4c4c85, #050505d1);
            border-radius: 5px;
            width: 100vw;
            text-align: center;
            box-shadow: 1px 3px 5px 0px #141414;
            padding: 20px;
            text-shadow: 8px 6px 5px #160340;
        }

        p:nth-child(2) {
            font-size: 3vmin;
            letter-spacing: 1vmin;
            background-color: #00000088;
            border-radius: 1vmin;
            padding: 1vmin 3vmin;
        }

        #instructions {
            width: 100%;
            height: 100%;
            /* background: #000000cc; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
        }

        p:last-child {
            position: fixed;
            bottom: 1vh;
            font-size: 1vw;
        }

        h5 {
            background: #00000087;
            padding: 5px 10px;
            font-size: 1.1vw;
            border-radius: 10px;
            color: #b4baf7bf;
        }

        #passLevel {
            /* top: 0; */
            left: 0;
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 99;
            background: #16034044;
            transition: all 0.4s linear;
            top: 100vw;
            /* display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; */
        }


        #passLevel {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            grid-gap: 5px;
        }

        #passLevel>h1 {
            grid-area: 2/2/7/8;
            color: #ffffff;
            background-color: #000000a3;
            margin: 0;
            padding: 4vw;
            font-size: 5vw;
            text-shadow: 5px 5px 3px #111312;
        }

        .clay {
            background: var(--clay-background, rgba(0, 0, 0, .005));
            border-radius: var(--clay-border-radius, 28px);
            box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, .25)), inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, .2));
        }


        #passLevel button {
            --clay-background: var(--color-red);
            border: none;
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 3vw;
            text-shadow: 2px 2px 4px var(--text-shadow, #9e4242);
        }

        #passLevel #next {
            grid-area: 3/4/5/6;
        }

        #restart {
            --clay-background: #aaaaff !important;
            --text-shadow: #7474b7;
            background: var(--clay-background, rgba(0, 0, 0, .005)) !important;
            grid-area: 4/5/6/7;
            transform: translateY(2vw);
        }

        .icon {
            width: 3vw;
            height: 3vw;
        }
    </style>
</head>

<body>
    <!-- <canvas class="webgl"></canvas> -->
    <div id="blocker">
        <div id="instructions">
            <p class="title">
                <svg onclck="window.open('https://gitee.com/honbingitee/jump-juml-happy')" t="1655895059371"
                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2321"
                    width="32" height="32">
                    <path
                        d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                        fill="#C71D23" p-id="2322"></path>
                </svg>
                跳跳乐
                <svg onclick="window.open('https://github.com/Jedi-hongbin/jump-jump-happy')" t="1655894937149"
                    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2142"
                    width="32" height="32">
                    <path
                        d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                        p-id="2143"></path>
                </svg>

            </p>
            <p>移动: <strong> W A S D </strong></p>
            <p>跳: <strong>空格</strong></p>
            <p>观察: 移动鼠标</p>
            <p>加速: shift</p>
            <h5>巧用加速有意想不到的效果</h5>
            <p>点击任意处开始</p>
        </div>
    </div>
    <div id="passLevel">
        <h1 class="clay"> 恭喜🎉<br />通过关卡 </h1>
        <button id="next" class="clay">下一关</button>
        <button id="restart" class="clay">再来一次</button>
    </div>

</body>

</html>